<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>富文本编辑器</title>
		<script src="https://cdn.jsdelivr.net/npm/wangeditor@4.6.4/dist/wangEditor.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="http://cdn.bootcss.com/highlight.js/8.0/highlight.min.js"></script>
		<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
		<link href="http://cdn.bootcss.com/highlight.js/8.0/styles/monokai_sublime.min.css" rel="stylesheet">
		<style type="text/css">
			/* table 样式 */
			table {
				border-top: 1px solid #ccc;
				border-left: 1px solid #ccc;
			}

			table td,
			table th {
				border-bottom: 1px solid #ccc;
				border-right: 1px solid #ccc;
				padding: 3px 5px;
			}

			table th {
				border-bottom: 2px solid #ccc;
				text-align: center;
			}

			/* blockquote 样式 */
			blockquote {
				display: block;
				border-left: 8px solid #d0e5f2;
				padding: 5px 10px;
				margin: 10px 0;
				line-height: 1.4;
				font-size: 100%;
				background-color: #f1f1f1;
			}

			/* code 样式 */
			code {
				display: inline-block;
				*display: inline;
				*zoom: 1;
				background-color: #f1f1f1;
				border-radius: 3px;
				padding: 3px 5px;
				margin: 0 3px;
			}

			pre code {
				display: block;
			}

			/* ul ol 样式 */
			ul,
			ol {
				margin: 10px 0 10px 20px;
			}
		</style>
	</head>
	<body>
		<div id="edit"></div>

		<textarea  id="text1" style="width:100%; height:200px;"></textarea>

		<button type="button" id="btn">获取html内容</button>
		<button type="button" id="btn2">获取text内容</button>

		<div id="content">

		</div>
	</body>

	<script type="text/javascript">
		const E = window.wangEditor
		const editor = new E('#edit')
		// 或者 const editor = new E( document.getElementById('div1') )

		// 挂载highlight插件
		editor.highlight = hljs

		editor.config.height = 800

		const $text1 = $('#text1')

		editor.config.onchange = function(html) {
			// 第二步，监控变化，同步更新到 textarea
			$text1.val(html)
		}
		
		editor.config.excludeMenus = [
		        'emoticon',
		        'video'
		    ]

		editor.config.emotions = [{
				title: 'emoji', // tab 的标题
				type: 'emoji', // 'emoji' / 'image'
				// emoji 表情，content 是一个数组即可
				content: '🌈 🌹 😀 😃 😄 😁 😆 😅 😂 😊 😇 🙂 🙃 😉 😓 😪 😴 🙄 🤔 😬 🤐 😀'.split(/\s/),
			},
			{
				title: '文字', // tab 的标题
				type: 'emoji', // 'emoji' / 'image'
				// emoji 表情，content 是一个数组即可
				content: '🌈 🌹 😀 😃 😄 😁 😆 😅 😂 😊 😇 🙂 🙃 😉 😓 😪 😴 🙄 🤔 😬 🤐 😀'.split(/\s/),
			}
		]

		// 配置 server 接口地址
		// upload/file
		/* editor.config.uploadImgServer = 'upload/file'
		
		editor.config.uploadImgMaxSiz = 2 * 1024 */
		
		editor.config.uploadImgShowBase64 = true 


		editor.create()

		$(function() {
			$("#btn").click(function() {
				var content = editor.txt.html()
				$("#content").html(content)
			})
			$("#btn2").click(function() {
				var content = editor.txt.text()
				$("#content").html(content)
			})
		})
	</script>

</html>
